<template>
	<div>
		<main>
			<table border="1" cellspacing="0" bordercolor="#ccc">
				<thead>
					<tr>
						<th rowspan="2">{{ table.id }}</th>
						<th rowspan="2">{{ table.siteName }}</th>
						<th rowspan="2">{{ table.setArticle }}</th>
						<th rowspan="2">
							<el-checkbox
								:label="table.checkAll.name"
								:indeterminate="table.checkAll.indeterminate"
								v-model="table.checkAll.check"
								@change="handleCheckAll"
							></el-checkbox>
						</th>
						<th :colspan="item.operate.length" v-for="item in table.checkOther" :key="item.name">
							<el-checkbox
								:label="item.name"
								:indeterminate="item.indeterminate"
								v-model="item.check"
								@change="handleCheckOther($event, item.name)"
							></el-checkbox>
						</th>
					</tr>
					<tr>
						<template v-for="val in table.checkOther">
							<th v-for="item in val.operate" :key="item.id">
								<el-checkbox
									:label="item.name"
									:indeterminate="item.indeterminate"
									v-model="item.check"
									@change="handleCheckOperateSite($event, item.fatherName)"
								></el-checkbox>
							</th>
						</template>
					</tr>
				</thead>
				<tbody>
					<tr v-for="td in tr" :key="td.id">
						<td>{{ td.id }}</td>
						<td>{{ td.name }}</td>
						<td>
							<el-button type="primary" size="mini">{{ td.set }}</el-button>
						</td>
						<td>
							<el-checkbox
								:label="td.checkAll.name"
								:indeterminate="td.checkAll.indeterminate"
								v-model="td.checkAll.check"
							></el-checkbox>
						</td>
						<td v-for="check in td.checkSite" :key="check.id">
							<el-checkbox
								:label="check.name"
								:indeterminate="check.indeterminate"
								v-model="check.check"
							></el-checkbox>
						</td>
						<td v-for="check in td.checkModel" :key="check.id">
							<el-checkbox
								:label="check.name"
								:indeterminate="check.indeterminate"
								v-model="check.check"
							></el-checkbox>
						</td>
					</tr>
				</tbody>
			</table>
		</main>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				key: 'value',
				checkBox: {
					indeterminate: false,
					checked: false,
					label: ''
				},
				table: {
					id: '序号',
					siteName: '站点名称',
					setArticle: '设置站点名称',
					checkAll: {
						name: '全选',
						indeterminate: false,
						check: false
					},
					checkOther: [
						{
							name: '站点',
							indeterminate: false,
							check: false,
							operate: [
								{ name: '查看', check: false, id: 10, fatherName: '站点' },
								{ name: '修改', check: false, id: 11, fatherName: '站点' },
								{ name: '导出', check: false, id: 12, fatherName: '站点' },
								{ name: '预览', check: false, id: 13, fatherName: '站点' },
								{ name: '回收站', check: false, id: 14, fatherName: '站点' },
								{ name: '新增频道', check: false, id: 15, fatherName: '站点' },
								{ name: '删除', check: false, id: 17, fatherName: '站点' },
								{ name: '导入', check: false, id: 18, fatherName: '站点' },
								{ name: '发布', check: false, id: 19, fatherName: '站点' },
								{ name: '批量', check: false, id: 21, fatherName: '站点' },
								{ name: '复制', check: false, id: 23, fatherName: '站点' }
							]
						},
						{
							name: '频道',
							indeterminate: false,
							check: false,
							operate: [
								{ name: '查看', check: false, id: 20, fatherName: '频道' },
								{ name: '新增', check: false, id: 121, fatherName: '频道' },
								{ name: '复制', check: false, id: 122, fatherName: '频道' },
								{ name: '预览', check: false, id: 123, fatherName: '频道' },
								{ name: '文章新增', check: false, id: 124, fatherName: '频道' },
								{ name: '修改', check: false, id: 126, fatherName: '频道' },
								{ name: '移动', check: false, id: 27, fatherName: '频道' },
								{ name: '发布', check: false, id: 28, fatherName: '频道' },
								{ name: '文章回收站', check: false, id: 29, fatherName: '频道' },
								{ name: '删除', check: false, id: 31, fatherName: '频道' }
							]
						}
					]
				},
				tr: [
					{
						id: 1,
						name: '上海慧洲1',
						set: '设置',
						checkAll: { name: '', indeterminate: false, check: false },
						checkSite: [
							{ name: '', indeterminate: false, check: false, id: 1 },
							{ name: '', indeterminate: false, check: false, id: 2 },
							{ name: '', indeterminate: false, check: false, id: 3 },
							{ name: '', indeterminate: false, check: false, id: 4 },
							{ name: '', indeterminate: false, check: false, id: 5 },
							{ name: '', indeterminate: false, check: false, id: 6 },
							{ name: '', indeterminate: false, check: false, id: 7 },
							{ name: '', indeterminate: false, check: false, id: 8 },
							{ name: '', indeterminate: false, check: false, id: 9 },
							{ name: '', indeterminate: false, check: false, id: 10 },
							{ name: '', indeterminate: false, check: false, id: 11 }
						],
						checkModel: [
							{ name: '', indeterminate: false, check: false, id: 101 },
							{ name: '', indeterminate: false, check: false, id: 102 },
							{ name: '', indeterminate: false, check: false, id: 103 },
							{ name: '', indeterminate: false, check: false, id: 104 },
							{ name: '', indeterminate: false, check: false, id: 105 },
							{ name: '', indeterminate: false, check: false, id: 106 },
							{ name: '', indeterminate: false, check: false, id: 107 },
							{ name: '', indeterminate: false, check: false, id: 108 },
							{ name: '', indeterminate: false, check: false, id: 109 },
							{ name: '', indeterminate: false, check: false, id: 110 }
						]
					},
					{
						id: 2,
						name: '上海慧洲2',
						set: '设置',
						checkAll: { name: '', indeterminate: false, check: false },
						checkSite: [
							{ name: '', indeterminate: false, check: false, id: 1 },
							{ name: '', indeterminate: false, check: false, id: 2 },
							{ name: '', indeterminate: false, check: false, id: 3 },
							{ name: '', indeterminate: false, check: false, id: 4 },
							{ name: '', indeterminate: false, check: false, id: 5 },
							{ name: '', indeterminate: false, check: false, id: 6 },
							{ name: '', indeterminate: false, check: false, id: 7 },
							{ name: '', indeterminate: false, check: false, id: 8 },
							{ name: '', indeterminate: false, check: false, id: 9 },
							{ name: '', indeterminate: false, check: false, id: 10 },
							{ name: '', indeterminate: false, check: false, id: 11 }
						],
						checkModel: [
							{ name: '', indeterminate: false, check: false, id: 101 },
							{ name: '', indeterminate: false, check: false, id: 102 },
							{ name: '', indeterminate: false, check: false, id: 103 },
							{ name: '', indeterminate: false, check: false, id: 104 },
							{ name: '', indeterminate: false, check: false, id: 105 },
							{ name: '', indeterminate: false, check: false, id: 106 },
							{ name: '', indeterminate: false, check: false, id: 107 },
							{ name: '', indeterminate: false, check: false, id: 108 },
							{ name: '', indeterminate: false, check: false, id: 109 },
							{ name: '', indeterminate: false, check: false, id: 110 }
						]
					},
					{
						id: 3,
						name: '上海慧洲3',
						set: '设置',
						checkAll: { name: '', indeterminate: false, check: false },
						checkSite: [
							{ name: '', indeterminate: false, check: false, id: 1 },
							{ name: '', indeterminate: false, check: false, id: 2 },
							{ name: '', indeterminate: false, check: false, id: 3 },
							{ name: '', indeterminate: false, check: false, id: 4 },
							{ name: '', indeterminate: false, check: false, id: 5 },
							{ name: '', indeterminate: false, check: false, id: 6 },
							{ name: '', indeterminate: false, check: false, id: 7 },
							{ name: '', indeterminate: false, check: false, id: 8 },
							{ name: '', indeterminate: false, check: false, id: 9 },
							{ name: '', indeterminate: false, check: false, id: 10 },
							{ name: '', indeterminate: false, check: false, id: 11 }
						],
						checkModel: [
							{ name: '', indeterminate: false, check: false, id: 101 },
							{ name: '', indeterminate: false, check: false, id: 102 },
							{ name: '', indeterminate: false, check: false, id: 103 },
							{ name: '', indeterminate: false, check: false, id: 104 },
							{ name: '', indeterminate: false, check: false, id: 105 },
							{ name: '', indeterminate: false, check: false, id: 106 },
							{ name: '', indeterminate: false, check: false, id: 107 },
							{ name: '', indeterminate: false, check: false, id: 108 },
							{ name: '', indeterminate: false, check: false, id: 109 },
							{ name: '', indeterminate: false, check: false, id: 110 }
						]
					}
				]
			}
		},
		computed: {
			checkedOtherArr() {
				// 第二层的所有选中情况
				const isArr = []
				this.table.checkOther.forEach(e => {
					isArr.push(e.check)
				})
				return isArr
			},
			checkedOperateObj() {
				// 操作中的所有选中情况
				const isArr = []
				this.table.checkOther.forEach(e => {
					const obj = {}
					obj['name'] = e.name
					obj['check'] = []
					e.operate.forEach(ee => {
						obj.check.push(ee.check)
					})
					isArr.push(obj)
				})
				return isArr
			}
		},
		watch: {
			table: {
				handler() {
					console.log('11')
				},
				deep: true
			}
		},
		methods: {
			handleCheckAll(e) {
				const checkOther = this.table.checkOther
				const checkAll = this.table.checkAll
				checkAll.indeterminate = false
				// 控制 操作这一层
				this.checkAllOperate(checkOther, e)

				this.tr.forEach(ee => {
					// column
					ee.checkAll.check = e
					// 内
					ee.checkSite.forEach(eee => {
						eee.check = e
					})
					ee.checkModel.forEach(eee => {
						eee.check = e
					})
				})
			},
			handleCheckOther(e, name) {
				const checkOther = this.table.checkOther
				const checkAll = this.table.checkAll
				const otherEvery = checkOther.every(val => val.check == true)
				// 控制全选
				checkAll.check = otherEvery
				checkOther.forEach(ee => {
					if (ee.name == name) {
						ee.indeterminate = false
					}
				})
				if (otherEvery) {
					checkAll.indeterminate = false
				} else {
					checkAll.indeterminate = checkOther.some(val => val.check == true)
				}
				// 控制 操作这一层
				this.checkOtherOperate(checkOther, name, e)
			},
			handleCheckOperateSite(e, fatherName) {
				const checkAll = this.table.checkAll
				const checkOther = this.table.checkOther
				const checkArr = this.getCheckArr(checkOther, fatherName)
				checkOther.forEach(v => {
					if (v.name == fatherName) {
						if (checkArr.every(ee => ee == true)) {
							v.check = true
							v.indeterminate = false
						} else {
							v.check = false
							v.indeterminate = checkArr.some(ee => ee == true)
						}
					}
				})
				this.$nextTick(() => {
					//  判断isD 属性的
					let flagIs = this.getOhterIsArr().every(e => e == false)
					let flagCheck = this.getCheckAllArr().every(e => e == true)
					if (flagCheck) {
						checkAll.check = true
						checkAll.indeterminate = false
					} else {
						if (flagIs) {
							checkAll.check = false
							checkAll.indeterminate = false
						} else {
							checkAll.check = false
							checkAll.indeterminate = true
						}
					}
				})
			},

			getCheckArr(value = [], fatherName = '') {
				let checkArr = []
				value.forEach(val => {
					if (val.name == fatherName) {
						val.operate.forEach(ee => {
							if (ee.name != '') {
								checkArr.push(ee.check)
							}
						})
					}
				})
				return checkArr
			},
			getOhterIsArr() {
				const isArr = []
				this.table.checkOther.forEach(e => {
					isArr.push(e.indeterminate)
				})
				return isArr
			},
			getCheckAllArr() {
				const checkArr = []
				this.table.checkOther.forEach(e => {
					checkArr.push(e.check)
				})
				return checkArr
			},
			checkOtherOperate(value = [], name = '', e) {
				value.forEach(val => {
					if (val.name == name) {
						val.operate.forEach(ee => {
							ee.check = e
						})
					}
				})
			},
			checkAllOperate(value = [], e) {
				value.forEach(val => {
					val.check = e
					val.indeterminate = false
					// 操作内的选中
					val.operate.forEach(ee => {
						ee.check = e
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	table {
		width: 1600px;
		height: auto;
		tbody {
			tr {
				text-align: center;
			}
		}
	}
</style>
